<template>
  <div id="printTest" class="printContent">
    <div class="page">
      <div v-for="i in 2" :key="i">
        <div>编号： {{ pOrder.carNo }} </div>
        <div class="title">睢宁县农产品运输车辆通行证</div>
        <div><span class="label">车牌号：</span>{{ pOrder.carNumber }}</div>
        <div>
          <span class="label">进睢时间：</span
          >{{ pOrder.timeFrom | formatDateAndTime(pOrder.timeFrom) }}
        </div>
        <div>
          <span class="label">出睢时间：</span
          >{{ pOrder.timeTo | formatDateAndTime(pOrder.timeTo) }}
        </div>
        <div>
          <span class="label">驾驶员信息：</span>
          <div>
            姓名：{{ driver.driverName }}
            <div>联系方式：{{ driver.driverPhone }}</div>
            身份证号：{{ driver.driverIdNumber }}
          </div>
        </div>
        <div>
          <span class="label">镇包挂负责人：</span>
          <div>
            姓名：{{ goods.governmentName }}
            <div>联系方式：{{ goods.governmentPhone }}</div>
            职务：{{ goods.governmentPost }}
          </div>
        </div>
        <div>
          <span class="label"> 企业包挂负责人：</span>
          <div>
            姓名：{{ goods.contactName }}
            <div>联系方式：{{ goods.contactPhone }}</div>
            职务：{{ goods.contactPost }}
          </div>
        </div>
        <div class="tool">睢宁县农村防控组（代章）</div>
        <div class="tool">{{ time }}</div>
      </div>
    </div>

    <el-button
      v-print="printObj"
      id="print"
      type="primary"
      class="no-print"
    >打印</el-button
    >
  </div>
</template>

<script>
import { formatDateAndTime } from '@/filters'
import { detail } from '@/api/plantcarpassport'
import { driverList } from '@/api/plantcardriver'

export default {
  components: {},
  filters: {
    formatGmt(time) {
      if (time == null || time === '') {
        return '无'
      }
      return formatDateAndTime(time)
    },
    formatStatus(status) {
      if (status === 1) {
        return '已通过'
      } else if (status === 0) {
        return '待审核'
      }
    }
  },
  props: {
    pOrder: {
      type: Array,
      required: false,
      default: () => [] // 默认值是空数组
    }
  },

  data() {
    return {
      printObj: {
        id: 'printTest', // 打印区域 Dom ID
        popTitle: '打印页面标题文字',
        extraCss: 'https://www.google.com,https://www.google.com',
        extraHead:
          '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>' //  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；
      },
      goods: {},
      driver: {
        driverName: '',
        driverPhone: '',
        driverIdNumber: ''
      },
      time: ''
    }
  },
  watch: {
    pOrder() {
      console.log(this.pOrder)
      this.init()
      this.getDriverList()
    }
  },
  created() {
    console.log(this.pOrder)
    var T = new Date().toLocaleDateString().split('/')
    this.time = T[0] + ' 年 ' + T[1] + ' 月 ' + T[2] + ' 日 '
    this.init()
    this.getDriverList()
  },
  methods: {
    tapPrint() {
      this.$nextTick(() => {
        document.getElementById('print').click()
      })
    },
    init: function() {
      const goodsId = this.pOrder.id // 28//
      if (goodsId) {
        detail(goodsId).then(response => {
          // this.goods = Object.assign({}, response.data.data);
          this.goods = response.data.data
          console.log('this.goods', this.goods)
        })
      }
    },
    getDriverList: function() {
      const goodsId = this.pOrder.id // 28//
      if (goodsId) {
        driverList(goodsId).then(response => {
          var D = response.data.data[0]
          if (D) {
            this.driver = D
          }
          console.log('this.driver', this.driver)
        })
      }
    }
  }
}
</script>
<style type="text/css" lang="scss">
@page {
  size: landscape;
}
.printContent {
  height: 100%;
  padding-top: 30px;
  color: black;
  font-size: 14px;
  .page {
    display: flex;
    justify-content: space-between;
    > div {
      flex: 1;
      &:last-child {
        border-left: 2px dashed gray;
        margin-left: 35px;
        padding-left: 35px;
      }
      > div {
        margin-bottom: 25px;
        display: flex;
        .label {
          font-size: 17px;
          width: 140px;
        }
        > div > div {
          margin: 10px 0;
        }
        .tool {
          justify-content: flex-end;
        }
      }
    }
  }
  .title {
    font-size: 19px;
    justify-content: center;
  }
  .el-button {
    margin-top: 30px;
    display: block;
  }
}
@media print {
  html,
  body {
    height: inherit;
  }
  body {
    margin: 5mm;
  }
  .no-print {
    display: none !important;
  }
}
</style>
